<template>
	<div>
		<mainTop></mainTop>
		<div class="spzqMiddleBox">
			<!-- <div style="width: 1600px;margin: 0 auto;"> -->
			<div class="spzq" v-if="this.videos">
				<div class="spModule"
					v-for="(item,index) in videos.rows"
					:key="index"
				>
					<a :href="'https://zha.heavenk.com/prod-api'+ item.upload" target="_blank" style="text-decoration: none;color: #150e52;">
					<div style="width: 100%;height: 240px; position: relative;background-color: #f7f7f7;"><img :src="'https://zha.heavenk.com/prod-api'+ item.picture" alt="" style="width:100%;height: 100%;" >
					<img src="../images/playButton.png" style="position: absolute;left: 12px;bottom: 12px;"/>
					</div>
					<div style="padding: 5px 15px;font-size: 18px;">
						<div style="color: #150e52;font-weight: 600;max-height: 48px;overflow: hidden;">{{ item.name }}</div>
						<div style="color: #150e52;margin-top: 8px;">时间：{{ item.upload.slice(16,26) }}</div>
					</div>
					</a>
				</div>	
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 38px;height: 40px;" v-if="total">
				<div style="height: 60px;float: right;margin-top: 0px;">
						 <el-pagination
							  @size-change="handleSizeChange"
							  @current-change="handleCurrentChange"
							  :current-page.sync="currentPage"
							  :page-size="9"
							  layout="prev, pager, next"
							  :total="this.total">
							</el-pagination>
							<div class="el-pagination__jump">
								共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
									<input type="text" class="inputNum" v-model="pageInputNum"
									oninput="value=value.replace(/[^\d]/g,'');
									if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
									value= value.substr(1,1)}" >
							</div>
							页
							</div>
							
						<button class="button1" style=""  @click="changePage">确定</button>
				</div>
			</div>
			
			
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				videos:'',
				total:5,
		   };
	   },
	   created(){
			this.getVideos(1);

	   },
	   methods:{
			getNowYear(){
				let nowDate = new Date();
			   this.nowYear=nowDate.getFullYear();
		   },
		   handleSizeChange(val) {
		   	console.log(`每页 ${val} 条`);
		   },
		   handleCurrentChange() {
		    //   this.contentPerPage.pn=this.currentPage;
		    //   contentList(this.contentPerPage).then(response => {
		    //           this.contentPerPageList = response.data;
		    //         });
				this.getVideos(this.currentPage)
		   },
		   changeFirstPage(){
		   	this.currentPage=1;
		   	this.handleCurrentChange();
		   },
		   changeLastPage(){
		   	this.currentPage=this.totalPageSize;
		   	this.handleCurrentChange();
		   },
		   getTotalPageSize(){
		   	this.totalPageSize=this.totalCount/this.pageSize
		   },
		   changePage(){
		   	this.currentPage=parseInt(this.pageInputNum);
		   	this.handleCurrentChange();
		   },
		   getVideos(pnum){
				axios.get('https://zha.heavenk.com/prod-api/web/video/list',{
					params:{
						pageSize:9,
						pageNum:pnum,
					}
				}).then((res)=>{
                    this.videos=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/9)
                })
		   }
	   },
	   mounted() {
	   	this.getNowYear()
	   }
	}
</script>

<style>
	.spzqMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.spzq{
		width: 1140px;
		min-width: 1140px;
		/* height: 1070px; */
		margin: auto;
		margin-top: 55px;
	}
	.spModule{
		width: 362px;
		height: 337px;
		background-color: #fff;
		display: inline-block;
		margin-right: 26px;
		/* float: left; */
		margin-bottom: 25px;
	}
	.spModule:nth-child(3n){
		width: 363px;
		height: 337px;
		background-color: #fff;
		display: inline-block;
		/* float: left; */
		margin-bottom: 25px;
		margin-right: 0px !important;
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>